<template>
	<div>
		<el-button type="primary" @click="handleNew" class="new">新增</el-button>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="roleName" label="角色名称" width="200" />
			<el-table-column prop="checkedKeys" label="角色权限">
				<template #default="scope">
					<el-tag v-for="item in scope.row.checkedKeys" :key="item">{{
						mapKeyToValue(item)
					}}</el-tag></template
				></el-table-column
			>
			<el-table-column label="操作" width="300">
				<template #default="scope">
					<el-button
						type="primary"
						size="small"
						@click="handleEdit(scope.$index, scope.row)"
						>编辑</el-button
					>
					<el-button
						size="small"
						type="primary"
						@click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer v-model="drawer" :with-header="false">
			<h3>{{ !detail ? "新增" : "编辑" }}</h3>
			<el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
			<a-tree v-model:checkedKeys="checkedKeys" checkable :tree-data="treeData">
				<template #title="{ title, key }">
					<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{
						title
					}}</span>
					<template v-else>{{ title }}</template>
				</template>
			</a-tree>
			<el-button
				type="primary"
				size="default"
				@click="handleBtn"
				class="drawer"
				v-if="!detail"
				>新增</el-button
			>
			<el-button
				v-else
				type="primary"
				size="default"
				@click="handleBtnEdit"
				class="drawer"
				>编辑</el-button
			>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { routes } from "../../router";
import { roleInfoType } from "../../types/roleInfo";
import {
	roleInfoPost,
	roleInfoGet,
	roleInfoDel,
	roleInfoPut,
} from "../../api/role";

//点击编辑还是新增
let detail = 0;
//点击编辑选中的数组
let roleInfo = reactive<roleInfoType>({
	roleName: "",
	checkedKeys: [],
});
//抽屉里的input
let roleName = ref("");
let treeData = routes[0].children;
treeData = transformData(treeData);

//处理treeData数据
function transformData(data: any) {
	return data.map((item: any) => {
		const { path, meta } = item;
		return {
			key: path,
			title: meta.label,
			icon: meta.icon || "",
			children: item.children ? transformData(item.children) : [],
		};
	});
}
function filterTreeData(treeData: any) {
	return treeData.filter((node: any) => {
		if (node.title === "状态页" || node.title === "个人设置") {
			return false;
		}
		if (node.children && node.children.length) {
			node.children = filterTreeData(node.children);
		}
		return true;
	});
}
treeData = filterTreeData(treeData);

function getPathTitleMap(data: any) {
	let map: any = {};
	data.forEach((item: any) => {
		let path = item.path;
		let title = item.meta.label;
		map[path] = title;
		let children = item.children;
		if (children) {
			Object.assign(map, getPathTitleMap(children));
		}
	});
	return map;
}
const mapKeyToValue = (key: string) => {
	let arr = getPathTitleMap(routes[0].children);
	for (let i in arr) {
		if (key == i) {
			return arr[i];
		}
	}
};

let drawer = ref(false);
//编辑选中的checkedKeys
let checkedKeys = ref<string[]>([]);

//角色列表渲染
let tableData = ref<roleInfoType[]>();
let arr = {};
roleInfoGet().then((res) => {
	tableData.value = res.data.results;
});

//新增按钮
const handleNew = () => {
	drawer.value = true;
	detail = 0;
	checkedKeys.value = [];
	roleName.value = "";
};
let objectId = "";
let idx = 0;
//编辑按钮
const handleEdit = (index: number, row: any) => {
	drawer.value = true;
	detail = 1;
	checkedKeys.value = row.checkedKeys;
	roleName.value = row.roleName;
	objectId = row.objectId;
	idx = index;
};

//删除按钮
const handleDelete = (index: number, row: any) => {
	roleInfoDel(row.objectId).then(() => {
		tableData.value?.splice(index, 1);
	});
};

//抽屉新增按钮
const handleBtn = () => {
	roleInfo.checkedKeys = checkedKeys.value;
	roleInfo.roleName = roleName.value;
	roleInfoPost(roleInfo).then(() => {
		tableData.value!.push(roleInfo);
		drawer.value = false;
	});
};

//抽屉编辑按钮
const handleBtnEdit = () => {
	roleInfo.checkedKeys = checkedKeys.value;
	roleInfo.roleName = roleName.value;
	roleInfoPut(objectId, roleInfo).then(() => {
		tableData.value![idx] = roleInfo;
	});
	drawer.value = false;
};
</script>

<style scoped>
.drawer {
	margin-top: 20px;
}
.new {
	margin-bottom: 10px;
}
</style>
